<template>
  <div class="wrapper">
  <div id="poster">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0px" class="login-content">
      <h2 class="login_title" style="text-align:center">问卷系统注册</h2>

      <el-form-item prop="type" style="padding-left: 80px;margin-top: 10px">
        <img src="../assets/我的.png" alt="" style="width: 20px; position: relative;top:5px; margin-right: 5px">
        <el-select v-model="value" @change="changeHandler" placeholder="请选择您要注册的账户类型">
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="[item.label,item.id]">
          </el-option>
        </el-select>
      </el-form-item>
      <el-divider></el-divider>
      <el-row>
        <el-col span="12">
          <el-form-item prop="account">
            <el-input type="text" v-model="ruleForm.account" style="width: 200px" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item prop="phoneNumber">
            <el-input type="text" v-model="ruleForm.phoneNumber" style="margin-left:30px;width: 200px" placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="12">
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" style="width: 200px" placeholder="请输入密码" autocomplete="off" prefix-icon="el-icon-lock" show-password></el-input>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" style="margin-left:30px;width: 200px" placeholder="请再次输入密码" autocomplete="off" prefix-icon="el-icon-lock" show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col span="12">
          <el-form-item prop="passwordQ">
            <el-input type="passwordQ" v-model="ruleForm.passwordQ" style="width: 200px" placeholder="请输入密保问题" autocomplete="off" prefix-icon="el-icon-key"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item prop="passwordA">
            <el-input type="passwordA" v-model="ruleForm.passwordA" style="margin-left:30px;width: 200px" placeholder="请输入密保答案" autocomplete="off" prefix-icon="el-icon-unlock"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="position: center">
        <button class="summit" @click="submitForm('ruleForm')">提交
        </button>
        <button class="restart" @click="resetForm('ruleForm')"> 重置
        </button>
<!--        <el-button type="primary"style="width:46%;background: #42b983" @click="submitForm('ruleForm')">提交</el-button>-->
<!--        <el-button style="width: 46%" @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script>
export default {
  name:'Register',
  data() {

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {

      ruleForm: {
        account:'',
        phoneNumber:'',
        password: '',
        checkPass: '',
        type:'',
        typeQ:'',
        passwordQ:'',
        passwordA:'',
        subscription:'',  //租户  计费管理  订阅的服务
        price:'',  //租户  计费管理  订阅服务的价格
        cycle:'',  //租户  计费管理  订阅服务的计费周期 字符串吧 按月 按季 按年
        due:'',  //租户  计费管理  订阅服务的到期时间
        autoRenewal:true,   //租户  计费管理  自动续费
        state:1
      },
      options: [{
                  id: '1',
                  label: '用户'
                }, {
        id: '2',
                  label: '答者'
                }, {
        id: '3',
                  label: '租户'
                }],
      value:'',
      rules: {
        account: [
          {  requird:true,message:"请输入内容", trigger: 'blur' }
        ],
        phoneNumber: [
          {  requird:true,message:"请输入内容", trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    changeHandler:function(e){
      this.ruleForm.type=e[0]
      this.ruleForm.typeQ=e[1]
    },
    submitForm(formName) {
        if(this.ruleForm.typeQ==1){
          this.axios.post('http://localhost:9090/consumer/register',this.ruleForm).then((resp) =>{
            let data=resp.data;
            this.ruleForm={};
            this.$notify({
                title: '成功',
                message: '这是一条成功的提示消息',
                type: 'success'
              });
            this.$router.push({path:'/'})
          })
        }else if(this.ruleForm.typeQ==3){
          this.axios.post('http://localhost:9090/tenant/register',this.ruleForm).then((resp) =>{
            let data=resp.data;
            this.ruleForm={};
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            });
            this.$router.push({path:'/'})
          })
        }else{
          this.axios.post('http://localhost:9090/respondent/register',this.ruleForm).then((resp) =>{
            let data=resp.data;
            this.ruleForm={};
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            });
            this.$router.push({path:'/'})
          })
        }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
.wrapper {
  height: 100vh;
  background-image: url("@/views/bg.png");

  /*背景图不缩放*/
  background-size: cover;
  webkit-background-size: cover;
  -o-background-size: cover;
  /*背景图不滚动*/
  background-attachment: fixed;

  overflow: hidden;
}
#poster{
  background-position:center ;
  height: 100%;
  width: 100%;
  background-size:cover ;
  position: fixed;

}
body{
  margin: 0px;
  padding: 0px;
}
.login-content{
  border-radius: 15px;
  background-clip:padding-box ;
  margin: 90px auto;
  width: 500px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.65);
  padding: 35px 35px 35px 35px;
  height: 430px

}
.login_title{
  text-align: center;
  margin-top: 10px;
}
button.summit {
  margin-left: 40px;
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: #fff;
  z-index: 1;
  background: #42b983;
  position: relative;
  font-weight: 1000;
  font-size: 17px;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
  width:150px

}

button.summit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: #fff;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms
}

button.summit:hover {
  color: #212121;
}

button.summit:hover::before {
  width: 100%;
}
button.restart {
  margin-left: 40px;
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: #212121;
  z-index: 1;
  background: #e8e8e8;
  position: relative;
  font-weight: 1000;
  font-size: 17px;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
  width:150px
}

button.restart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: #212121;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms
}

button.restart:hover {
  color: #e8e8e8;
}

button.restart:hover::before {
  width: 100%;
}
</style>